<template>
	<view>
		<view class="bg-white flex align-center">
			<view class="margin-tb custom-tab text-center"
				:class="{'custom-tab-choose': index == tab, 'text-blue': index == tab}" v-for="(item,index) in tabs" :key="index"
				@tap="click(index)">
				{{ item }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "z-tabs",
		data() {
			return {
				tab: 0,
				tabs: []
			};
		},
		props: {
			data: {
				type: Array,
				default: []
			},
		},
		mounted() {
			this.tabs = this.data;
		},
		methods: {
			click(index) {
				this.tab = index;
				this.$emit('onChange', {
					val: this.tab
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-tab {
		flex: 1;
		border-right: 2rpx solid #F0F0F0;
		&:last-child{
			border: none;
		}
		&-choose {
			position: relative;
			&::after {
				content: '';
				width: 40rpx;
				height: 6rpx;
				background: #0081ff;
				position: absolute;
				bottom: -28rpx;
				left: calc(50% - 20rpx);
				border-radius: 10rpx;
			}
		}
	}
</style>
